<template>
	<view style="height: 100vh;">
		<mescroll-uni :scroll-y="true" :down="downOption" @down="downCallback" :up="upOption">
			<header-component></header-component>
			<view class="uni-tab-bar">
				<!-- 选项卡 -->
					<view class="tabbar">
						<scroll-view class="tab-scroll" :scroll-x="true">
						<view v-for="(item,index) in tabBars" :key="item.foreignKey" v-if="index > 0" class="tab-item">
							<view class="tab-info" @click="turnSecond(item.foreignKey)">
								<image class="tab-icon" :src="common.url+item.image"></image>
								<text>{{item.name}}</text>
							</view>
						</view>
						</scroll-view>
					</view>
				
				<!-- 轮播图 -->
				<view class="banner-box">
					<banner-list :banList="banList"></banner-list>
				</view>
				<!-- 通知 -->
				<view class="notice">
					<image :src="notice.image"></image>
				</view>
				<!-- 列表 -->
				<view class="news-list">
					<view v-for="(tabItem, tabIndex) in newsList" :key="tabIndex">
						<block v-for="(newsValue, newsIndex) in tabItem.data" :key="newsIndex+Math.random()" v-if=" newsValue.length>0">
							<block>
								<uni-index-list :valuelist="newsValue" :name="newsValue[0].navname" :navigateId="newsValue[0].navigateId" @click="goDetail" @turnDT="turnDT"></uni-index-list>
							</block>
							<block v-for="(qyItem,qyIndex) in qylist" :key="qyIndex" v-if="qyIndex == newsIndex">
								<uni-index-qy :datalist="qyItem" @TurnTwo="getQySecond" @TurnThree="getQyThree"></uni-index-qy>
							</block>
						</block>
					</view>
				</view>
			</view>
			<videoItem v-if="isshowvideo" v-on:isshowvideofn="isshowvideofn" :videodata="videodata"></videoItem>	
		</mescroll-uni>
	</view>
</template>

<script>
	import headerComponent from '@/components/headerTop.vue';
	import bannerList from '@/components/banner-list.vue';
	import changeTabbar from '@/components/tab-bar-change/changeTabbar.vue';
	import uniMediaList from '@/components/uni-media-list/uni-media-list.vue';
	import uniMediaQy from '@/components/uni-media-qy/uni-media-qy.vue';
	import uniIndexList from '@/components/uni-index-list/uni-index-list.vue';
	import uniIndexQy from '@/components/uni-index-qy/uni-index-qy.vue';
	import MescrollUni from "mescroll-uni";
	import {
		common
	} from '@/common/publish.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import videoItem from '@/components/video-item/video-item.vue';
	export default {
		components: {
			headerComponent,
			bannerList,
			changeTabbar,
			uniMediaList,
			uniMediaQy,
			uniIndexList,
			uniIndexQy,
			videoItem,
			MescrollUni
		},
		data() {
			return {
				offset: 0,
				total: 1,
				loadingText: '',
				isshowvideo: false,
				videodata: {},
				scrollLeft: 0,
				old:{
					scrollLeft: 0,
					cur:0
				},
				newsList: [],
				tabIndex: 0,
				cur:0,
				tabBars: [],
				banList: [],
				qylist: [],
				pushurl: '',
				systemWidth:'',
				upOption: {
					use:false,
					auto: false
				},
				downOption:{},
				newup:{use:false},
				notice:{}
			}
		},
		onLoad:function(){
			var that = this;
			uni.getSystemInfo({
				success:(res) =>{
					that.systemWidth = res.windowWidth - 60
				}
			})

			this.getBannerList();
			this.getNotice();
			// //请求 tabbar 导航栏
			uni.request({
				url: common.url + '/api/newsCentre/navList.json',
				success: (res) => {
					that.tabBars = res.data;
					this.makeNewlist();
					this.getList();
				}
			})
		},
		methods: {
			downCallback(mescroll){
				// this.newsList[this.tabIndex].offset = 0;
				// this.newsList[this.tabIndex].resFrist = true;
				this.getList(mescroll)
			},
			upCallback(mescroll){
				return false;
			},
			//通过tabbars来生成操作的数组
			makeNewlist() {
				this.tabBars.forEach((tabBar) => {
					this.newsList.push({
						data: [],
						resFrist:true,
						requestParams: {
							offset: 0,
							limit: 10,
							navigateId: tabBar.foreignKey
						},
						name: tabBar.name,
						offset: 0,
						total: 1,
						loadingText: '加载中...'
					});
				});
			},
			//展示轮播图
			getBannerList() {
				uni.request({
					url: common.url + '/api/projectBanner/list.json',
					success: (res) => {
						if (res.data.ret) {
							this.banList = res.data.data;
						}
					}
				})
			},
			//展示通知的图片
			getNotice(){
				uni.request({
					url:common.url+"/api/inform/list.json",
					success:(res)=>{
						this.notice = res.data[0]
						console.log(this.notice)
					}
				})
			},
			//获取首页前沿数据
			getqyList() {
				uni.request({
					url: common.url + '/api/Frontiers/pagelist.json',
					success: (res) => {
						if (res.statusCode == 200) {
							this.qylist = res.data.rows;
						}
					}
				})
			},
			//获取首页数据（除前沿）
			getList(mescroll) {
				var that = this;
				let activeTab = this.newsList[this.tabIndex];
				if (this.tabIndex == 0) {
					//this.showBan = false;
					
					//推荐首页
					uni.request({
						url: common.url + '/api/newsCentre/homePage.json',
						success: (res) => {
							that.getqyList()
							if (res.statusCode == 200) {
								res.data.forEach((v) => {
									if (v.length > 5) {
										v.length = 5;
									}
								})
								console.log(activeTab)
								activeTab.data = res.data;
								that.$forceUpdate()								
								that.firstPage = true;
								mescroll.endSuccess()
								//activeTab.loadingText = '没有更多数据了'
							}
						}
					})
				} else {
					activeTab.requestParams.offset = activeTab.offset;
					activeTab.resFrist = false;
					if (activeTab.offset >= activeTab.total) {
						return
					}
					activeTab.loadingText = "加载中..."
					//判断是否是前沿专题来的  
					if (this.newsList[this.tabIndex].name == '前沿') {
						uni.request({
							url: common.url + '/api/Frontiers/pagelist.json',
							data: {
								offset: activeTab.offset,
								limit: 4,
							},
							success: (res) => {
								if (res.statusCode == 200) {
									if (activeTab.offset == 0) {
										activeTab.data = res.data.rows
									} else {
										res.data.rows.forEach((v) => {
											activeTab.data.push(v);
										})
									}
									activeTab.offset = parseInt(activeTab.offset) + parseInt(res.data.limit);
									activeTab.total = res.data.total;
									if (activeTab.offset >= activeTab.total) {
										activeTab.loadingText = '没有更多数据了'
										mescroll.endSuccess(10,false)
									} else {
										activeTab.loadingText = '下拉加载更多'
										mescroll.endSuccess(10,true)
									}
								}
							}
						})
					} else {
						uni.request({
							url: common.url + '/api/newsCentre/appointNavList.json',
							data: activeTab.requestParams,
							success: (res) => {
								if (res.statusCode == 200) {
									if (res.data.rows.length > 0) {
										res.data.rows.forEach((v) => {
											if (v.displayType == '多图') {
												v.class = 'threeimg'
											} else if (v.displayType == '纯文字') {
												v.class = 'noimg'
											} else if (v.displayType == '单图') {
												v.class = 'oneimg'
											} else if (v.displayType == '广告') {
												v.class = 'frist-img'
											} else {
												v.class = 'noimg'
											}
											if (v.label && v.label.length > 7) v.label = v.label.substring(0, 6) + '...';
										});
										if (activeTab.offset == 0) {
											activeTab.data = res.data.rows;
										} else {
											res.data.rows.forEach((v) => {
												activeTab.data.push(v)
											})
										}
									} else {
										//导航项中的列表为空
										activeTab.data = res.data.rows;
										activeTab.loadingText = '暂无更多信息'
									}
									that.firstPage = false;
									activeTab.offset = parseInt(activeTab.offset) + parseInt(res.data.limit);
									activeTab.total = res.data.total;
									if (activeTab.offset >= activeTab.total) {
										activeTab.loadingText = '没有更多数据了'
										mescroll.endSuccess(10,false)
									} else {
										activeTab.loadingText = '下拉加载更多'
										mescroll.endSuccess(10,true)
									}
								}
							}
						})
					}
				}
				this.$forceUpdate()
			},
			scroll: function(e) {
				this.$nextTick(function() {
				 this.old.scrollLeft = e.detail.scrollLeft
				});
				
			},
			//跳转详情（非前沿）可能专题，可能新闻
			goDetail(id, articletype, link,title) {
				console.log(id)
				//新闻，直接打开详情页面
				if (articletype == 1 || articletype == 0) {
					if (link) {
						//如果连接存在 ==》 外链
						var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
						var wherefrom = reg.test(link);
						if (wherefrom) {
							uni.navigateTo({
								url:'/pages/turnLink/turnLink?type=index&link='+encodeURIComponent(JSON.stringify(link))+'&title='+title
							})
						} else {
							uni.navigateTo({
								url: '/pages/xq/xq?type=index&id=' + id
							});
						}
					} else {
						//本地
						uni.navigateTo({
							url: '/pages/xq/xq?type=index&id=' + id
						});
					}
				} else if (articletype == 2) {
					//专题，打开专题页面
					uni.navigateTo({
						url: '/pages/secondPage/secondPage?url=' + id
					});
				} else {
					var url = link.split('?')
					if(url[1]){
						var new2 = url[1].replace(/&/g,"---").replace(/=/g,"--")
						uni.navigateTo({
							url: '/pages/webview/webview?url='+url[0]+'&otrcan='+new2
						});
					}else{
						uni.navigateTo({
							url: '/pages/webview/webview?url='+link
						});
					}
				}
			},
			//跳二级页面
			turnSecond(navigateId){
				//前沿
				if(navigateId == '99fe452d91c7451aba44824b370ef0f0'){
					uni.navigateTo({
						url:'../secondList/qylist?navigateId='+navigateId
					})
				}else{
				//非前沿
					uni.navigateTo({
						url:'../secondList/list?navigateId='+navigateId
					})
				}
				
			},
			 //跳转动态
			turnDT(fid){
				this.turnSecond(fid)
			   },
			//跳转前沿二级页面
			getQySecond(id, img, title) {
				uni.navigateTo({
					url: '/pages/qysecond/qysecond?id=' + id + '&img=' + img + '&title=' + title
				});
			},
			//跳转前沿三级页面
			getQyThree(id, title) {
				uni.navigateTo({
					url: '/pages/qythree/qythree?id=' + id + '&title=' + title
				});
			},
			isshowvideofn() {
				this.isshowvideo = false
			},
			tovideo(val) {
				var that = this;
				if (val) {
					uni.request({
						url: common.csurl + '/api/livReminder/newstOnline.json',
						success: (res) => {
							if(res.data){
								this.videodata = res.data;
								if (Number(res.data.version) > Number(val.version)) {
									that.isshowvideo = true;
									uni.setStorage({
										key: 'videolv',
										data: res.data
									})
								} else {
									common.toupdata(that)
								}
							}
						}
					});
				} else {
					uni.request({
						url: common.csurl + '/api/livReminder/newstOnline.json',
						success: (res) => {
							if(res.data){
								that.videodata = res.data;
								that.isshowvideo = true;
								uni.setStorage({
									key: 'videolv',
									data: res.data
								})
							}else{
								common.toupdata(that)
							}
						}
					});
				}
			},

			getNodeSize(node) {
				return new Promise((resolve, reject) => {
					dom.getComponentRect(node, (result) => {
						resolve(result.size);
					});
				});
			},
			getElSize(id) { //得到元素的size
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select('#' + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				});
			}
		}
	}
</script>
<style lang="scss">
	@import '../.././common/publish.scss';
	@import '../.././static/iconfont.css';
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('../../static/font/iconfont.ttf') format('truetype');
	}
	page {
		height: 100%;
		font-size: 8px;
	}
	.scrollbox {
		width: 648upx;
	}

	.uni-tab-bar {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 100%;
		padding: 0 30upx;
		position: relative;
	}
	.tab-scroll{
		white-space: nowrap;
		height: 140upx;
		flex-direction: row;
	}
	.tabbar{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 140upx;
		padding: 24upx 0upx;
		background-color: #FFFFFF;
		transform: translateY(-75%);
		box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
		border-radius: 10upx;
		.tab-item{
			width: 138upx;
			padding:24upx 39upx;
			display: inline-block;
			.tab-info{
				display: flex;
			}
			image{
				width: 60upx;
				height: 60upx;
			}
			text{
				text-align: center;
				font-size: 24upx;
			}
		}
			
	}
	.banner-box{
		margin-top: -70upx;
	}
	.uni-tab-bar .list {
		width: 750upx;
		height: 100%;
	}
	.notice{
		width: 100%;
		height:140upx;
		margin-top: 16upx;
		margin-bottom: 6upx;
		border-radius: 10upx;
		box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
		image{
			border-radius: 10upx;
			width: 100%;
			
		}
	}
	.news-list{
		margin-top: 20upx;
		border-radius: 10upx;
		box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
		overflow: hidden;
	}
	.uni-swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 88upx;
		height: 88upx;
	}

	.swiper-tab-list {
		font-size: 32upx;
		width: 108upx;
		display: inline-block;
		text-align: center;
		color: #d9dee1;
	}

	.uni-tab-bar .active {
		color: #ffffff;
		font-weight: bold;
	}

	.uni-tab-bar .swiper-box {
		flex: 1;
		width: 100%;
		height:100%;
	}
	.swiper-isitem{
		height:100%;
	}
	

	.magTopClass88 {
		//padding-top: 88upx;
		//margin-top: 88upx;
	}

	.magTopClass0 {
		margin-top: 0;
	}

</style>
